<template>
  <div class="container">
    <div class="contentText">
      <div class="title">注册</div>
      <div class="form">
        <van-form @submit="onSubmit" validate-first>
          <van-field
            v-model="form.info.mobile"
            name="phone"
            label=""
            placeholder="请输入手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
          />

          <van-field
            v-model="form.info.code"
            name="code"
            label=""
            placeholder="请输入验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
          >
            <template #button>
              <van-button
                native-type="button"
                size="small"
                style="checking"
                type="primary"
                @click="checkingFn"
                >发送验证码</van-button
              >
            </template>
          </van-field>

          <van-field
            v-model="form.info.invite_code"
            name="pcode"
            label=""
            placeholder="请输入邀请码"
          />

          <van-field
            v-model="form.info.password"
            type="password"
            name="passwd"
            label=""
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />

          <van-field
            v-model="form.info.passwordone"
            type="password"
            name="passwordone"
            label=""
            placeholder="请再次输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />

          <van-checkbox
            v-model="form.info.checked"
            shape="square"
            checked-color="#1FB470"
            class="check"
            >我同意晟艺轩平台<span style="color: red" @click.stop="toFn"
              >《用户协议》</span
            ></van-checkbox
          >

          <div style="margin: 16px">
            <van-button round block native-type="submit" class="myButton"
              >注 册</van-button
            >
          </div>
        </van-form>
      </div>
      <div class="text" @click="$emit('navGetTo', 0)">已有帐号？ 返回登陆</div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, useContext } from "vue";
import { Toast } from "vant";
import { setSignUp } from "@/api/http.js";
import smsSend from "../../public/smsSend";
import { useRouter, useRoute } from "vue-router";

export default defineComponent({
  setup() {
    const router = useRouter();
    const route = useRoute();
    const form = reactive({
      info: {
        mobile: "", // 电话
        code: "", // 验证码
        invite_code: route.query.pcode ? route.query.pcode : "", // 邀请码
        password: "", // 密码
        passwordone: "", //二次密码
        checked: false,
      },
    });
    console.log(form.info);
    const ctx = useContext();
    const onSubmit = async (values) => {
      if (form.info.password != form.info.passwordone)
        return Toast.fail("密码填写不一致");
      if (!form.info.checked) return Toast.fail("请同意用户协议");
      values.phone = Number(values.phone);
      delete values.passwordone;
      console.log("values---", values);
      const data = await setSignUp(values);
      data.code == 200 ? Toast.success(data.msg) : Toast.fail(data.msg);
      if (data.code == 200) ctx.emit("navGetTo", 0);
    };

    const checkingFn = async () => {
      const phoneZZ = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      const phone = Number(form.info.mobile);
      if (!phoneZZ.test(phone)) return Toast.fail("号码错误");
      smsSend(form.info.mobile, 1);
    };

    const toFn = () => {
      router.push({
        name: "Notice",
      });
    };

    return {
      onSubmit,
      form,
      checkingFn,
      toFn,
    };
  },
});
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: #faf9f6;
  color: var(--textColor);

  .contentText {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    padding: 0 3%;

    .title {
      color: var(--textColor);
      font-size: 2.1rem;
      font-family: PingFang SC;
      font-weight: bold;
      text-align: center;
    }

    .form {
      margin-top: 40px;
      .van-cell {
        background-color: transparent;
        color: var(--textColor);
      }
      /deep/ .van-field__control {
        color: var(--textColor);
      }
      .van-cell::after {
        border-bottom: 1px solid #caa674;
      }
      .button {
        margin-top: 30px;
        color: #fff;
        font-size: 1em;
        border-radius: 5px;
      }
      /deep/ .van-checkbox {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 30px auto;
        text-align: center;
      }
      /deep/ .van-checkbox__label {
        color: var(--textColor);
        font-size: 0.9em;
      }
      /deep/ .van-button--small {
        border: 1px solid #caa674;
        color: #caa674;
        padding: 15px;
        background-color: transparent;
        border-radius: 20px;
      }
      /deep/ .van-button__text:nth-child(2) {
        font-size: 0.7rem;
      }
      /deep/ .van-button--normal {
        font-size: 1.2rem;
      }
      .myButton {
        background-color: #caa674;
        height: 60px;
        border-radius: 0;
        border: none;
        letter-spacing: 5px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #fff;
        margin-top: 40px;
      }
    }

    .text {
      margin-top: 40px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #caa674;
      text-align: center;
    }
  }
}
</style>
